<!-- 表格组件 -->
<script lang="tsx" setup>
import type { TableInstance } from 'element-plus';

import type { TableColumnOption } from '@/components/table-widget/table-widget.vue';
import type { components } from '@/genapi/wh';

import { injectState } from '../state';
import DetailDialog from './detail-dialog.vue';
import { ref } from 'vue';

defineOptions({ name: 'Sheet' });

const {
  selectedList,
  page: { records, isLoading },
} = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

const tableRef = shallowRef<TableInstance>();

watch(records, () =>tableRef.value?.clearSelection());

const selectionChange = (rows: any) => {
  selectedList.value = toRaw(rows);
};

const columns: TableColumnOption<components['schemas']['TbRiskHazardsDTO']>[] = [
  {
    label: '序号',
    type: 'selection',
    fixed: 'left',
  },
  {
    label: '序号',
    type: 'index',
    fixed: 'left',
    width: 80,
  },
  {
    label: '隐患级别',
    prop: 'level',
    formatter(row) {
      let hidelevel = ref('')
      if(row.level == '1'){
        hidelevel.value = '一般隐患'
      }else if(row.level == '2'){
        hidelevel.value = '重大隐患'
      }
      else{
        hidelevel.value = '--'
      }
      return (
        <>
        {hidelevel.value}
        </>
      )
    }
  },
  {
    label: '隐患描述',
    prop: 'description',
  },
  {
    label: '上报时间',
    prop: 'reportTime',
  },
  {
    label: '整改限期',
    prop: 'handlePlanEndDate',
    formatter(row){
      return (
       <>
       {row.handlePlanStartDate}--{row.handlePlanEndDate}
       </>
      )
    }
  },
  {
    label: '复查日期',
    prop: 'checkDate',
  },
  {
    label: '复查部门',
    prop: 'checkDept',
  },
  {
    label: '整改完成时间',
    prop: 'handleRealDate',
  },
  {
    label: '整改状态',
    prop: 'supervisionStatus',
    formatter(row) {
      let status = ref('')
      if(row.supervisionStatus == '1'){
        status.value = '待完成'
      }else if(row.supervisionStatus == '2'){
        status.value = '待整改'
      }else if(row.supervisionStatus == '3'){
        status.value = '逾期未整改'
      }else if(row.supervisionStatus == '4'){
        status.value = '已完成'
      }else if(row.supervisionStatus == '5'){
        status.value = '延期整改中'
      }else{
        status.value = '--'
      }
      return (
        <>
        {status.value}
        </>
      )
    }
  },
  {
    label: '操作',
    export: false,
    fixed: 'right',
    width: '200',
    formatter(row) {
      return (
        <>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('detail', row)}
          >
            详情
          </el-button>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('edit', row)}
          >
            编辑
          </el-button>
        </>
      );
    },
  },
];
</script>

<template>
  <TableWidget
    v-loading="isLoading"
    :data="records"
    :columns="columns"
    h="100%!"
    @selection-change="selectionChange"
  />

  <DetailDialog ref="detailDialogRef" />
</template>
